<template>
  <div class="authentication">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
      <el-form-item label="企业营业执照" prop="img">
        <div class="shangchuan">
          <el-upload class="avatar-uploader" action="" :on-change="change1" accept="image/jpg,image/png,image/jpeg" :show-file-list="false" :auto-upload="false">
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="企业名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="code">
        <el-input v-model="ruleForm.code"></el-input>
      </el-form-item>
      <el-form-item label="营业执照有效期" prop="time">
        <el-input v-model="ruleForm.time"></el-input>
      </el-form-item>
      <el-form-item label="注册地址" prop="address">
        <el-input type="textarea" v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="法人身份证" prop="img">
        <div class="shangchuan">
          <el-upload class="avatar-uploader" action="" :on-change="change2" accept="image/jpg,image/png,image/jpeg" :show-file-list="false" :auto-upload="false">
            <img v-if="imageUr2" :src="imageUr2" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-upload class="avatar-uploader" action="" :on-change="change3" accept="image/jpg,image/png,image/jpeg" :show-file-list="false" :auto-upload="false">
            <img v-if="imageUr3" :src="imageUr3" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="法人身份证号码" prop="identityCard">
        <el-input v-model="ruleForm.identityCard"></el-input>
      </el-form-item>
      <el-form-item label="法人手机号" prop="telephone">
        <el-input v-model="ruleForm.telephone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="telephone">
        <el-input v-model="ruleForm.Verification"></el-input>
        <el-button @click="send">发送验证码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Verification, creater, enterprise } from './index'

import qs from 'qs'
import { getItem } from '@/utils/store'

export default {
  data() {
    return {
      imageUrl: '', // 企业营业执照 验证码
      imageUr2: '', // 法人省份证正面
      imageUr3: '', // 法人省份证背面
      userid: '',
      ruleForm: {
        img: '',
        names: '',
        code: '',
        time: '',
        address: '',
        identityCard: '',
        telephone: '17694946949',
        email: '425045689@qq.com',
        Verification: '1111',
      },
      rules: {
        img: [{ required: true, message: '请按照规定上传图片', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        code: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        time: [{ required: true, message: '请输入营业执照有效期', trigger: 'blur' }],
        address: [{ required: true, message: '请输入营业执照注册地址', trigger: 'blur' }],
        identityCard: [{ required: true, message: '请输入法人身份证号码', trigger: 'blur' }],
        telephone: [{ required: true, message: '请输入法人手机号码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.userid = getItem('XIE_XIN').user_id
    console.log(this.userid)
  },
  methods: {
    /* 发送验证码 */
    async send() {
      let ids = this.ruleForm.telephone
      const { data } = await Verification(ids)
      if (data.code == 903) {
        this.$message.success(data.msg)
      }
    },
    /* 身份证验证 */
    idcard() {
      let data = { image: this.imageUr2 }
      let data2 = qs.stringify(data) //转字符串

      this.$http.post('/account/person/ocr/idcard', data2).then((res) => {
        console.log(res, 4444)
        if (res.data.code == 0) {
          this.ruleForm.identityCard = res.data.data.idNumber
          this.ruleForm.names = res.data.data.name
          this.$message.success('识别身份成功')
        }
      })
    },
    /* 企业认证 */
    async certification() {
      // var that=this
      let datas = qs.stringify({ image: this.imageUrl })

      try {
        const { data } = await enterprise(datas)
        if (data.code == 0) {
          this.$message.success('识别企业信息成功')
          this.ruleForm.name = data.data.companyName
          this.ruleForm.code = data.data.companyCode
          this.ruleForm.time = data.data.term
          this.ruleForm.address = data.data.companyAddress
        }
        console.log(data, 222)
      } catch (error) {
        console.log(error)
      }
    },
    /* 新增 */
    async cert() {
      let datas = {
        userId: this.userid,
        companyName: this.ruleForm.name, //企业名称
        companyCode: this.ruleForm.code, //统一社会信用代码
        companyLicense: this.imageUrl, // 企业营业执照
        companyAddress: this.ruleForm.address, //注册地址
        legalIdName: this.ruleForm.name, // 法人姓名
        legalIdFrontside: this.imageUr2, // 法人身份证正面
        legalIdBackside: this.imageUr3,
        legalIdNumber: this.ruleForm.identityCard, //法人身份证号码
        legalPhone: this.ruleForm.telephone, //法人电话
        code: this.ruleForm.Verification, //验证码
        companyEmail: this.ruleForm.email,
      }
      try {
        const { data } = await creater(datas)
        if (data.code == 0) {
          this.$message.success(data.data)
        }
      } catch (error) {
        console.log(error)
      }
    },
    submitForm() {
      this.cert()
    },
    change1(file) {
      this.getBase64(file.raw).then((res) => {
        this.imageUrl = res
        this.certification()
      })
    },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === 'image/jpeg'
    //   const isLt2M = file.size / 1024 / 1024 < 2
    //   if (!isJPG) {
    //     this.$message.error('上传头像图片只能是 JPG 格式!')
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!')
    //   }
    //   return isJPG && isLt2M
    // },

    change2(file) {
      this.getBase64(file.raw).then((res) => {
        this.imageUr2 = res
        this.idcard()
      })
    },

    change3(file) {
      this.getBase64(file.raw).then((res) => {
        this.imageUr3 = res
      })
    },
    /* 转化64格式图片 */
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.authentication {
  margin: 40px;
  .demo-ruleForm {
    width: 800px;
    .shangchuan {
      display: flex;
      justify-content: center;
    }
    .avatar-uploader .el-upload {
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .avatar-uploader-icon {
        margin-right: 80px;
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px solid #777;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
  }
}
</style>